<script>
import {provide, reactive,ref} from "vue";
import Son from "./components/son.vue";
export default {
  name: "App",
  components: {Son},
  setup(props, context) {
    /*
    provide与inject函数
      Provide(提供)要为组件后代提供数据，需要使用到provide()函数
      inject(注入)要注入上层组件提供的数据，需使用 inject() 函数

    provide()
        提供一个值，可以被后代组件注入
        provide() 接受两个参数：第一个参数是要注入的 key，可以是一个字符串或者一个 symbol，第二个参数是要注入的值。

    inject()
        注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
        第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。
        第二个参数是可选的，即在没有匹配到 key 时使用的默认值。
    */
    let count = ref(0)
    provide("count", count)
    const person = reactive({name: "陶品奇", age: 22})
    provide("person", person)
    const change=()=>{
      count.value++
      person.age++
    }
    return {
      count,
      person,
      change
    }
  }
}
</script>
<template>
  <div id="app">
    <h1>App组件</h1>
    <h4>{{ count }}</h4>
    <h4>{{ person }}</h4>
    <button @click="change">修改count和person.age</button>
    <Son></Son>
  </div>
</template>

<style lang="less"></style>
